[Amazon Connect] チャットクライアントを設置してみました。（amazon-connect-chat-interface.jsを利用）

#Amazon Connect

#AWS

SIN

2019.12.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

CX事業本部の平内（SIN）です。

Amazon Connect(以下、Connect)では、先月から、音声での対応に加えて、チャットでの利用も可能になっています。

今回は、Amazonで提供されている、下記のチャットクライアントの設置を試してみました。

Github startChatContactAPI

上記のリポジトリでは、CFnも提供されており、設置するだけなら超簡単なのですが、ちょっと仕組みを確認したかったのと、少しでも理解が深まるようにと、CFnを使用せずに設置してみました。

最初に、利用している様子です。

2 インスタンス・コンタクトフロー

チャット設置には、対象となるConnectのインスタンス及び、接続先のコンタクトフローを最初に用意することが必要です。

ここで、コンタクトフローは、先日、作成した下記のものを使用しました。

[Amazon Connect] チャットに対応するコンタクトフローを作成してみました。

チャットクライアントから接続されると、20秒間待機し、何らかのキー入力があった時点でエージェントに繋ぐものとなっています。

問い合わせフローの開くと、左にフローのarnを表示させることができます。形式は、下記のようになっているので、インスタンスID及び、フローIDをここでコピーしておきます。

arn:aws:connect:{リージョン}:{アカウント}:instance/{インスタンスID}/contact-flow/{フローID}

3 Lambda

問い合わせフローを開始して、新しいチャットを開始するには、startChatContactAPIを使用します。

参考：startChatContact

var params = {
    InstanceId: instanceId,
    ContactFlowId: contactFlowId,
    Attributes: {
        customerName: customerName
    },
    ParticipantDetails: {
        DisplayName: displayName
    }
};

const result = await connect.startChatContact(params)

このAPIは、インスタンスID、フローID及び、顧客の名前等を引数にとり、接続に必要なトークン等を返します。

下記は、レスポンスの一例です。

{
    ContactId: "4012d973-xxxx-xxxx-xxxx-970f45fccc5a",
    ParticipantId: "d3b7da64-xxxx-xxxx-xxxx-68e6673476f2",
    ParticipantToken: "token"
}

今回試しているstartChatContactAPIでは、このstartChatContactをLambdaで実装し、API Gateway経由で、クライアントのJavaScriptから呼び出しています。

Githubのコードを参考に、下記のLambdaを設置しました。

Lambdaの戻り値では、ブラウザ側のJavaScriptで利用可能なように、CORS用のヘッダが追加されていますが、ここでは、いったん対象ドメインを*で指定しています。

AmazonConnectChatTest

const AWS = require('aws-sdk');
const connect = new AWS.Connect();

const instanceId = '7d0290d7-xxxx-xxxx-xxxx-ef397afa108d';
const contactFlowId = '14954dcd-xxxx-xxxx-xxxx-17e5b7f2a3f6';
const customerName = 'customer';
const displayName = 'customer';
const allowOrigin = '*';

exports.handler = async (event, _context) => {
    console.log(`REQUEST ${JSON.stringify(event)}`);
    
    var params = {
        InstanceId: instanceId,
        ContactFlowId: contactFlowId,
        Attributes: {
            customerName: customerName
        },
        ParticipantDetails: {
            DisplayName: displayName
        }
    };

    try {
        const result = await connect.startChatContact(params).promise();
        return createResponse(200, result);
    } catch(err) {
        return createResponse(500, err);
    }
};

function createResponse(statusCode, result) {
    const response = {
        statusCode: statusCode,
        headers: {
            "Access-Control-Allow-Origin": allowOrigin,
            'Content-Type': 'application/json',
            'Access-Control-Allow-Credentials' : true,
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
        },
        body: JSON.stringify({
            data: { startChatResult: result }
        })
    };
    console.log(`RESPONSE statucCode: ${statusCode} result: ${JSON.stringify(response)}`);
    return response;
}

Lambdaには、ConnectのAPIをコールするため、通常のCloudWatch Logへのアクセス以外に、下記のパーミッションが必要です。


{
    "Action": [
        "connect:StartChatContact"
    ],
    "Resource": [
        "arn:aws:connect:{リージョン}:{アカウント}:instance/{インスタンスID}",
        "arn:aws:connect:{リージョン}:{アカウント}:instance/{インスタンスID}/*"
    ],
    "Effect": "Allow"
}

4 API Gateway

API Gatewayでは、POSTを受け取るリソースを作成し、プロキシ統合で上記のLambdaへ繋いでいます。

5 amazon-connect-chat-interface.js

設置したhtmlは、以下のとおりです。こちらも、Guithubのコードをほとんど、そのまま利用させて頂いています。

amazon-connect-chat-interface.jsを使用していますので、読み込めるところに配置の必要があります。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

    <script src="amazon-connect-chat-interface.js"></script>
</head>
<body>
    <form name="contactDetails" id="contactDetails">
    <input type="submit" class="submit" id="startChat" value="Start Chat"></input>
    </form>
    <div class="section-chat" id="section-chat" style="display: none; width: 50%;">
        <div id="root"></div>
    </div>

    <script>

        const apiGatewayEndpoint = 'https://ggi242o24i.execute-api.ap-northeast-1.amazonaws.com/dev';
        const region = 'ap-northeast-1';
        const customerName = 'customer';

        $(document).ready((a) => {
            connect.ChatInterface.init({
                containerId: 'root' 
            });
        });
        $(function () {
            $('#contactDetails').submit(function (e) {
                e.preventDefault();
                document.getElementById("contactDetails").reset();
                connect.ChatInterface.initiateChat({
                    name: customerName,
                    region: region,
                    apiGatewayEndpoint: apiGatewayEndpoint,
                    contactAttributes: JSON.stringify({
                        "customerName": customerName
                    }),
                },successHandler, failureHandler);
            });
        });
        function successHandler(chatSession) {
            console.log("success!");
            $('#section-chat').fadeIn(400);
            chatSession.onChatDisconnected(function(data) {
                $('#section-chat').hide('slide');
            });
        }
        function failureHandler(error) {
            console.log("There was an error: ");
            console.log(error);
        }
    </script>

</body>